<!--
	作者：121066669@qq.com
	时间：2016-07-20
	描述：首页page
-->
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<!--
        	导航栏
        -->
		<header class="mui-bar mui-bar-nav" style="width: 100%;height: 40%;margin: 0px;padding: 0px;">
			<!--
            图片轮播
            -->
			<div id="slider" class="mui-slider" style="width: 100%;height: 100%;margin: 0px;padding: 0px;">
				<div class="mui-slider-group mui-slider-loop" style="width: 100%;height: 100%;">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate" style="width: 100%;height: 100%;">
						<a href="#" style="width: 100%;height: 100%;">
							<img id="toutiao_03" src="../image/home_page_05.jpg" style="width: 100%;height: 100%;">
							<div class="mui-slider-title">
								<p style="display: inline;border:1px solid #007AFF;color: #007AFF;">头条</p>
								<p style="display: inline;margin-left: 1em;">“初心不改，坚守信念”：上海科技新媒体联盟今日成立</p>
							</div>
						</a>
					</div>
					<div class="mui-slider-item" style="width: 100%;height: 100%;">
						<a href="#" style="width: 100%;height: 100%;">
							<img id="toutiao_01" src="../image/toutiao_04.jpg" style="width: 100%;height: 100%;">lo
							<div class="mui-slider-title">
								<p style="display: inline;border:1px solid #007AFF;color: #007AFF;">头条</p>
								<p style="display: inline;margin-left: 1em;">8月15日起，2016年度科学仪器领域项目开始网上申报啦！</p>
							</div>
						</a>
					</div>
					<div class="mui-slider-item" style="width: 100%;height: 100%;">
						<a href="#" style="width: 100%;height: 100%;">
							<img id="toutiao_02" src="../image/toutiao_02.jpg" style="width: 100%;height: 100%;">
							<div class="mui-slider-title">
								<p style="display: inline;border:1px solid #007AFF;color: #007AFF;">头条</p>
								<p style="display: inline;margin-left: 1em;">上海首张手绘创业地图发布，创业者可扫二维码“一站直达”</p>
							</div>
						</a>
					</div>
					<div class="mui-slider-item" style="width: 100%;height: 100%;">
						<a href="#" style="width: 100%;height: 100%;">
							<img id="toutiao_03" src="../image/toutiao_05.jpg" style="width: 100%;height: 100%;">
							<div class="mui-slider-title">
								<p style="display: inline;border:1px solid #007AFF;color: #007AFF;">头条</p>
								<p style="display: inline;margin-left: 1em;">“初心不改，坚守信念”：上海科技新媒体联盟今日成立</p>
							</div>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate" style="width: 100%;height: 100%;">
						<a href="#" style="width: 100%;height: 100%;">
							<img id="toutiao_01" src="../image/toutiao_04.jpg" style="width: 100%;height: 100%;">
							<div class="mui-slider-title">
								<p style="display: inline;border:1px solid #007AFF;color: #007AFF;">头条</p>
								<p style="display: inline;margin-left: 1em;">8月15日起，2016年度科学仪器领域项目开始网上申报啦！</p>
							</div>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-center" style="margin-bottom: 7%;">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
		</header>

		<div id="pullup-container" class="mui-content" style="top: 40%;position: relative;padding-top: 0px;margin-top: 0px;width: 100%;height: 60%;">
			<ul id="listView" class="mui-table-view" style="margin-top: 0px;width: 100%;position: absolute;">
			</ul>
			<img id="show_map" src="../image/map.png" style="z-index: 999;top: 90%;margin-left: 5%;font-size: 200%;width: 20%;position: fixed;background-color: #F2F2F2;"></img>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js"></script>
		<script src="../js/mui.lazyload.img.js"></script>
		<script src="../js/rem.js"></script>
		<script src="../js/initData.js"></script>
		<script>
			mui.init();
			document.getElementById("toutiao_01").addEventListener("tap", function() {
				plus.webview.create("news_page.html", "", "", {
					nnn_id: "8a21459c5679213401567a2d5b410006"
				})
			});
			document.getElementById("toutiao_02").addEventListener("tap", function() {
				plus.webview.create("news_page.html", "", "", {
					nnn_id: "8a21459c5679213401567a35c00d0008"
				})
			});
			document.getElementById("toutiao_03").addEventListener("tap", function() {
				plus.webview.create("news_page.html", "", "", {
					nnn_id: "8a21459c5679213401567a3295950007"
				})
			});

			function loadData() {
				var list = document.getElementById("listView");
				plus.nativeUI.showWaiting("数据加载中。。");
				mui.ajax(url_getnews, {
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						var json_value = JSON.parse(data);
						console.log("1111" + data);
						var body = json_value.value;
						for(i = 0; i < body.length; i++) {
							var li = document.createElement("li");
							li.className = "mui-table-view-cell mui-media";
							li.style.width = "100%";
							li.style.height = "7em";
							li.style.padding = "2%";
							li.innerHTML = '<a style="width: 100%;height:100%;margin: 0px;"><img class = "mui-pull-left" data-lazyload=' + body[i].images + ' style = "width: 6em; height: 4.75em;"/><div class = "mui-media-large"style = "width: 100%; height: 100%;" ><p class="mui-ellipsis-2" style = "margin-right:0px;height: 70%;font-size:100%;">' + body[i].title + '</p><span class = "mui-icon mui-icon-chatboxes" style = "font-size: 80%;width: 15%;height: 20%;">0</span> <span class = "mui-icon mui-icon-chat"style = "width:15%;height:20%;font-size: 80%;">0</span><p style = "width:15%;height:20%;font-size: 80%;display: inline;">' + body[i].date + '</p> <p style = "border:1px solid #CF2D28;display: inline;margin-left:5%;color: #CF2D28;font-size: 80%;">荐</p></div></a>';
							li.setAttribute("n_id", body[i].id);
							list.appendChild(li);
						};

						mui(".mui-table-view-cell").imageLazyload({
							placeholder: '../image/loading.jpg'
						});
						mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {
							var news_id = this.getAttribute("n_id");
							console.log(news_id);
							plus.nativeUI.showWaiting("请稍等加载中。。");
							plus.webview.create("news_page.html", "", "", {
								nnn_id: news_id
							});
						})
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
						console.log("home" + errorThrown);
						plus.nativeUI.closeWaiting();
					}
				});
			}
			mui.plusReady(function() {
				var slider = mui("#slider");
				slider.slider({
					interval: 5000
				});
				document.getElementById("show_map").addEventListener("tap", function() {
					plus.webview.open("map_list.html");
				});
				loadData();
			});
		</script>
	</body>

</html>